<template>
  <div id="app">
    <h2>购物车：</h2>
    <div>
      商品名称：
      <input v-model="obj.name" />
    </div>
    <div>
      商品价格：
      <input v-model="obj.price" />
    </div>
    <button @click="addGoods(obj)">添加商品</button>
    <div>{{goods}}</div>
    <div>{{count}}</div>
    <ul v-for="(item) in goods" :key="item.id">
     
      <li>
        
        商品名称：{{item.name}},价格：{{item.price}} +id:{{item.id}}
        <button @click='remoGoods(item.id)'>移除商品</button>
      </li>
    </ul>
    <h3>总价:100</h3>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { mapMutations } from "vuex";

export default {
  data() {
    return {
      obj: {
        name: "",
        price: "",
        id: ""
      }
    };
  },
  created() {
    console.log();
  },

  methods: {
    ...mapMutations(["addGoods", "remoGoods"])
  },
  computed: {
    ...mapState(["count", "goods"])
  }
};
</script>
<style scoped lang="less">
</style>
